<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>SB Admin 2 - Dashboard</title>

  <!-- Custom fonts for this template-->
  <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">

  <!-- Custom styles for this template-->
  <link href="css/sb-admin-2.min.css" rel="stylesheet">
  <style>
    #wrapper #content-wrapper {
      overflow-x: visible;
    }

    #loginbtn {
      display: none;
    }
  </style>
</head>

<body id="page-top">

  <!-- Page Wrapper -->
  <div id="wrapper">



    <!-- Content Wrapper -->
    <div id="content-wrapper" class="d-flex flex-column">

      <!-- Main Content -->
      <div id="content">

        <!-- Topbar -->
        <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">

          <!-- Sidebar Toggle (Topbar) -->
          <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
            <i class="fa fa-bars"></i>
          </button>

          <!-- Topbar Navbar 头部导航栏 -->
          <ul class="navbar-nav ml-auto">

            <div class="topbar-divider d-none d-sm-block"></div>

            <!-- Nav Item - User Information 用户信息 -->
            <li class="nav-item dropdown no-arrow">
              <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown"
                aria-haspopup="true" aria-expanded="false">
                <!-- 用户名 -->
                <span id="username" class="mr-2 d-none small d-lg-inline text-gray-600 ">公羊无衣</span>
                <!-- 登陆按钮 -->
                <span id="loginbtn" class="mr-2 d-none">登录</span>
              </a>
              <!-- Dropdown - User Information  下拉菜单 登出按钮-->
              <div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" id="userDropdownOptions"
                aria-labelledby="userDropdown">
                <a class="dropdown-item" id="logout" href="#" data-toggle="modal" data-target="#logoutModal">
                  <i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
                  登出
                </a>
              </div>
            </li>
          </ul>

        </nav>
        <!-- End of Topbar -->

      </div>
      <!-- End of Main Content -->


    </div>
    <!-- End of Content Wrapper -->

  </div>
  <!-- End of Page Wrapper -->


  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
  <script src="../public.js"></script>
  <script>
    let username = document.getElementById('username');
    let loginbtn = document.getElementById('loginbtn');
    let userDropdownOptions = document.getElementById('userDropdownOptions');
    let logout = document.getElementById('logout');

    //点击公羊无衣username弹出userDropdownOptions
    // username.onclick = function (e) {
    //   e = e || window.event;
    //   userDropdownOptions.style.display = 'block';
    //   e.stopPropagation();
    // }
    $('#username').on('click', e => {
      $('#userDropdownOptions').css({ display: 'block' });
      e.stopPropagation();
    })

    //点击登出logout隐藏username和出现loginbtn登录
    // logout.onclick = function () {
    //   username.className = 'd-none';
    //   loginbtn.className += ' d-lg-inline';
    //   userDropdownOptions.style.display = 'none';
    // }
    $('#logout').on('click', () => {
      $('#username').removeClass('d-lg-inline');
      $('#loginbtn').addClass(' d-lg-inline');
      $('#userDropdownOptions').css({ display: 'none' });
    })


    // document.onclick = function () {
    //   userDropdownOptions.style.display = 'none';
    // }
    $(document).on('click', () => {
      $('#userDropdownOptions').css({ display: 'none' });
    })

    // loginbtn.onclick = function () {
    //   location.href = './login.html';
    // }
    $('#loginbtn').on('click', () => {
      location.href = './login.html';
    })

    // window.onload = function () {
    //   let cookie = getCookie('email');
    //   if (cookie) {
    //     username.innerHTML = cookie;
    //   }
    // }
    $(document).ready(() => {
      if ($.cookie('email')) {
        $('#username').html($.cookie('email'));
      }
    })
  </script>


</body>

</html>